<!-- eslint-disable no-tabs -->
<template>
  <view>
    <view v-if="loaded || list.itemIndex < 27" class="uni-indexed-list__title-wrapper">
      <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
    </view>
    <view v-if="(loaded || list.itemIndex < 27) && list.items && list.items.length > 0" class="uni-indexed-list__list">
      <view
        v-for="(item, index) in list.items"
        :key="index"
        class="uni-indexed-list__item"
        hover-class="uni-indexed-list__item--hover"
      >
        <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
          <view
            class="uni-indexed-list__item-border"
            :class="{ 'uni-indexed-list__item-border--last': index === list.items.length - 1 }">
            <text class="uni-indexed-list__item-content">{{ item.name }}</text>
						<view style="font-size:24rpx; color:#999999;margin-left:10rpx" v-if="item.count !== void 0">(已收录{{item.count}}条)</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/* eslint-disable */
export default {
  name: 'UniIndexedList',
  emits: ['itemClick'],
  props: {
    loaded: {
      type: Boolean,
      default: false,
    },
    idx: {
      type: Number,
      default: 0,
    },
    list: {
      type: Object,
      default() {
        return {}
      },
    },
    showSelect: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    onClick(idx, index) {
      this.$emit('itemClick', {
        idx,
        index,
      })
    },
  },
}
</script>

<style lang="scss">
.uni-indexed-list__list {
  background-color: $uni-bg-color;
	display: flex;
  flex-direction: column;
	padding-left: 16px;
}

.uni-indexed-list__item {
  font-size: 14px;
	display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uni-indexed-list__item-container {
  flex: 1;
  position: relative;
	display: flex;
	box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uni-indexed-list__item-border {
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  // justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 20px;
  padding-left: 0;
}

.uni-indexed-list__item-border--last {
  border-bottom-width: 0px;
}

.uni-indexed-list__item-content {
  font-size: 24rpx;
  color: #000;
}

.uni-indexed-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.uni-indexed-list__title-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  /* #endif */
  background-color: #ffffff;
}

.uni-indexed-list__title {
  padding: 1px 16px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
	color: #999999;
}
</style>
